<template>
    <div>
        <!--新增模板-->
        <el-form v-model="formObj" @submit.prevent="showData" label-width="80px">

          <el-form-item label="模板名称" label-width="80px">
            <el-input v-model="formObj.name" placeholder="请输入模板名称" size="medium" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="模板描述" label-width="80px">
            <el-input v-model="formObj.description" placeholder="请输入模板描述" size="medium"></el-input>
          </el-form-item>

          <!--<el-form-item label="搜索框数量" label-width="90px">
            <el-input v-model="formObj.searchVal" placeholder="请输入:0~20" size="medium" style="width: 20%"></el-input>
          </el-form-item>-->

          <el-form-item label="操作条件" label-width="80px">
            <el-checkbox-group v-model="formObj.buttonList">
                <el-checkbox label="查询" value="search" border></el-checkbox>
                <el-checkbox label="新增" value="add" border></el-checkbox>
                <el-checkbox label="修改" value="update" border></el-checkbox>
                <el-checkbox label="删除" value="del" border></el-checkbox>
              </el-checkbox-group>
          </el-form-item>

          <el-form-item label="表格返回列数量" label-width="110px">
            <el-input v-model="formObj.returnVal" placeholder="请输入:0~20" size="medium" style="width: 20%"></el-input>
          </el-form-item>

          <el-row v-for="item in formObj.returnList" :key="item.attrId">
          <el-col :span="5">
              <el-form-item label="内容字段" >
                <el-input size="medium" placeholder="请填写内容字段（英文）" v-model="item.attr">{{item.attr}}</el-input>
              </el-form-item>
          </el-col>
          <el-col :span="7">
              <el-form-item label="内容描述">
                <el-input size="medium" placeholder="请填写内容字段（中文）" v-model="item.attrCn">{{item.attrCn}}</el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="内容类型">
                <!--<el-input size="medium"></el-input>-->
                <el-select placeholder="请选择内容字段类型" v-model="item.type">
                  <el-option label="字符型" value="VARCHAR"></el-option>
                  <el-option label="数字型" value="NUMBER"></el-option>
                  <el-option label="日期型" value="DATE"></el-option>
                  <el-option label="大文本" value="CLOB"></el-option>
                  <el-option label="文件" value="FILE"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="查询字段">
                <!--<el-input size="medium"></el-input>-->
                <el-select placeholder="" v-model="item.ifSearch">
                  <el-option label="是" value="yes"></el-option>
                  <el-option label="否" value="no"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          </el-row>

          <el-form-item>
              <el-button type="primary" @click="addTemplate">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'addTemplate',
  data() {
    return {
      val: '',
      formObj:{
        name:"",
        description:"",
        searchVal: 0,
        buttonList: [],
        returnVal: 0,
        returnList: [],
        searchList: []
      }
    };
  },
  computed: {

  },
  watch:{
    'formObj.returnVal': function(val,oldVal){
          console.log(oldVal);
          if(typeof (oldVal) == "undefined" || !oldVal || oldVal ==0 ){
              console.log( "(oldVal) ==undefined")
              /* 循环构造 循环val,添加input */
              for(var i=0;i<val;i++){
                let cope = {
                    attrId: parseInt(i)+1,
                    attr:"",
                    attrCn:"",
                    type:""
                }
                this.formObj.returnList.push(cope);
                console.log(JSON.stringify(this.formObj.returnList))
              }
          }else{
              /* 循环构造 循环val,添加input */
              for(var i=oldVal;i<val;i++){
                let cope = {
                    attrId: parseInt(i)+1,
                    attr:"",
                    attrCn:"",
                    type:""
                }
                this.formObj.returnList.push(cope);
                console.log(JSON.stringify(this.formObj.returnList))
              }
          }
        },
     'formObj.searchVal': function(val,oldVal){
               console.log(oldVal);
               if(typeof (oldVal) == "undefined" || !oldVal || oldVal ==0 ){
                   console.log( "(oldVal) ==undefined")
                   /* 循环构造 循环val,添加input */
                   for(var i=0;i<val;i++){
                     let cope = {
                         attrId: parseInt(i)+1,
                         attr:"",
                         attrCn:"",
                         type:""
                     }
                     this.formObj.searchList.push(cope);
                     console.log(JSON.stringify(this.formObj.searchList))
                   }
               }else{
                   /* 循环构造 循环val,添加input */
                   for(var i=oldVal;i<val;i++){
                     let cope = {
                         attrId: parseInt(i)+1,
                         attr:"",
                         attrCn:"",
                         type:""
                     }
                     this.formObj.returnList.push(cope);
                     console.log(JSON.stringify(this.formObj.searchList))
                   }
               }
             }
  },
  methods: {
    addTemplate(){
      console.log(JSON.stringify(this.formObj));
      this.$http.post('http://127.0.0.1:8080/template',this.formObj).then(function(result){
                var body = result.body
                if (body.success === true) {
                   return
                }
                },function(result){
                   alert(result.status)
                });
    }
  }
};
</script>
